import PictureBrowser from "@/base_ui/picture-browser"
import React, { memo, useState } from "react"
import { useSelector } from "react-redux"
import { DetailPicturesWrapper } from "./style"

const DetailPictures = memo((props) => {
  const { detailInfo } = useSelector((state) => ({
    detailInfo: state.detail.detailInfo,
  }))

  const [showBtn, setShowBtn] = useState(false)

  function showBtnHandle(isTrue) {
    setShowBtn(isTrue)
  }
  return (
    <DetailPicturesWrapper>
      <div className="pictures">
        <div className="left">
          <div className="item-left" onClick={(e) => showBtnHandle(true)}>
            <img src={detailInfo.picture_urls[0]} alt="请求失败" />
            {/* 遮罩层 */}
            <div className="cover"></div>
          </div>
        </div>
        <div className="right">
          {
            // 第一个开始 第四个结束
            detailInfo?.picture_urls?.slice(1, 5).map((item) => {
              return (
                <div
                  className="item-right"
                  key={item}
                  onClick={(e) => showBtnHandle(true)}
                >
                  <img src={item} alt="请求失败" />
                  <div className="cover"></div>
                </div>
              )
            })
          }
        </div>
        <div className="show-btn">
          <button onClick={(e) => showBtnHandle(true)}>显示图片</button>
          {showBtn && (
            <PictureBrowser
              detailInfo={detailInfo}
              closeBtn={(e) => showBtnHandle()}
            />
          )}
        </div>
      </div>
    </DetailPicturesWrapper>
  )
})

export default DetailPictures
